<template>
    <div class="chanpin">
        <slot></slot>
        <ul>
            <li v-for="item in chanpinArr" :key="item.id" @click="goDetailPage(item.id)">
                <img v-lazy="item.list_pic_url" alt="">
                <h3>{{item.name}}</h3>
                <section>{{item.retail_price|RMB}}</section>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        props: ["chanpinArr"],
        data() {
            return {

            }
        },
        methods:{
            goDetailPage(id){
                this.$router.push(`/detail/${id}`);
            }
        },
        created(){
            // scrollTo(0, 0);
        }
    }
</script>

<style lang="less" scoped>
    .chanpin {
        background: #fff;
        text-align: center;

        .chanpinTitle {
            height: 50px;
            font-size: 18px;
            line-height: 50px;
        }

        .chanpinTitle2 {
            height: 50px;
            font-size: 20px;
            line-height: 50px;
        }

        ul {
            // background-color: #fff;
            // height: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;

            padding: 10px;

            li {
                width: 48%;
                margin-bottom: 10px;
                padding-bottom: 10px;

                img {
                    width: 100%;
                    display: block;
                }

                h3 {
                    font-size: 14px;
                    width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                section {
                    color: darkred;
                }

            }
        }
    }
</style>